<template>
  <div class="box" v-loading="dataLoading">
    <div class="tig">注意：可设置6组捐赠规则</div>
    <div>
      <div class="setItem">
        <div class="lab">公益积分</div>
        <div class="lab">图片</div>
      </div>
      <div class="setItem" v-for="(v,i) in form" :key="i">
        <div>
          <el-input style="width:200px" v-model="v.points" oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" placeholder="请输入内容"></el-input>
        </div>
        <div class="img">
          <uploadImg :value="v.img?[v.img]:[]" :showFileList="false" @updataImg="getImg($event,i)"></uploadImg>
        </div>
        <div>
          <el-button type="primary" v-if="form.length<6" icon="el-icon-plus" @click="add" circle></el-button>
          <el-button type="danger" v-if="form.length>1" icon="el-icon-minus" @click="del(i)" circle></el-button>
        </div>
      </div>
    </div>
    <div class="btnBox">
      <el-button type="primary" :loadiing="btnLoading" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
import donationApi from '@/api/donationApi.js'
import uploadImg from '@/views/modules/oss/oss-uploadImg'
export default {
  components: {
    uploadImg
  },
  data () {
    return {
      form: [
        { points: "", img: "" }
      ],
      dataLoading: false,
      btnLoading: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 增加
    add () {
      if (this.form.length < 6) {
        this.form.push({ value: "" })
      }
    },
    // 删除
    del (index) {
      if (this.form.length > 1) {
        this.form.splice(index, 1)
      }
    },
    getImg (e, index) {
      this.form[index].img = e[0];
      this.$forceUpdate()
    },
    getList () {
      this.dataLoading = true;
      donationApi.pointsConfigList().then(res => {
        if (res && res.data.code == 200) {
          if (res.data.list.length > 0) {
            this.form = res.data.list;
          } else {
            this.form = [
              { points: "", img: "" }
            ]
          }
        }
        this.dataLoading = false;
      })
    },
    submit () {
      this.btnLoading = true;
      donationApi.pointsConfigSave(this.form).then(res => {
        this.btnLoading = false;
        if (res && res.data.code == 200) {
          this.$message.success('修改成功！');
          this.getList()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 0 50px;
  .tig {
    color: #807d7d;
  }
  .setItem {
    margin-top: 20px;
    display: flex;
    font-weight: 600;
    align-items: center;
    > div {
      width: 300px;
    }
    > .img {
      width: 150px !important;
    }
  }
  .btnBox {
    width: 800px;
    margin-top: 50px;
    text-align: center;
  }
}
</style>
<style>
.el-upload--picture-card {
  width: 100px !important;
  height: 100px !important;
  line-height: 106px !important;
}
</style>